import React, { useEffect, useState, useRef, useCallback } from 'react';
import { doctormanagement_list, hospitalnav_editlist, hospitalnav_deletelist, hospitalnav_pagelist, hospitalnav_list, hospitalnav_addlist, hospitalnav_searchlist } from '../../../utils/Hospital Information/api'
import type { ColumnsType } from 'antd/es/table';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { Input, Button, notification, TablePaginationConfig, Tag, Upload, DatePicker, } from 'antd';
import { Form, Modal, Select } from 'antd';
import UserTable from './MyUtils/UserTable';
import { useNavigate } from 'react-router-dom';

import '../../../styles/Hospital Information/Doctormanagement.scss'
import axios from 'axios';
import Index from '../../Index';
const { Search, } = Input;
interface Props {

}

interface DataType {
    address: string;
    phone1: string;
    yard: string;
    phone2: string;
    transit: string;
    operatingTime: string;
    key: number
}
interface Item {
    _id: string
    name: string
}

function Hospitalnavigation(props: Props) {
    var [form] = Form.useForm();
    // 表单中的描述内容区域
    const { TextArea } = Input;
    // 用于路由跳转
    var navigate = useNavigate()

    // 获取院区列表
    var [formlist, setFormlist] = useState([])
    // 获取本行的id修改内容
    var [newid, setNewid] = useState('')


    //决定了每一列渲染什么数据
    const columns: ColumnsType<DataType> = [
        {
            title: '院区', //表格列的名字(显示在表格头上)
            dataIndex: 'yard', //数据对应的属性名
            // key: 'id' //key是必须的,每一列不同.
        },
        {
            title: '地址',
            dataIndex: 'address',
        },
        {
            title: '电话1',
            dataIndex: 'phone1',
        },
        {
            title: '电话2',
            dataIndex: 'phone2'
        },
        {
            title: '公交',
            dataIndex: 'transit',
        },
        {
            title: '操作时间',
            dataIndex: 'operatingTime',
        },
        {
            title: '操作',
            // key: 'action',
            render: (_, record) => (
                <>
                    <div className="changebox">
                        <EditOutlined onClick={() => { toEdit(record,) }} />
                        <DeleteOutlined onClick={() => { toDel(record,) }} style={{ marginLeft: 20 }} />
                    </div>
                </>
            ),
        },
    ];

    useEffect(() => {
        hospitalnav_list().then((res) => {
            setFormlist(res.data)
        })
    }, [])

    // 按院区姓名搜索
    const onSearch = (value: string) => {
        var seachkey = value
        if (seachkey) {
            hospitalnav_searchlist(seachkey).then((res) => {
                console.log(res);
                setFormlist(res.data);
                notification.success({ message: '查询成功！' });
            })
        }
    }

    // 点击删除一行内容
    var toDel = (record: any) => {
        var id = record.id
        hospitalnav_deletelist(id).then((res) => {
            hospitalnav_list().then((res) => {
                setFormlist(res.data)
            })
            notification.success({ message: '删除成功！' });
        })
    }

    var [electeds, setElecteds] = useState([])
    // 复选框
    const elected = useCallback((elected: any) => {
        console.log("复选框", elected);
        setElecteds(elected)
    }, [electeds])

    // 批量删除
    var toAllDel = () => {
        console.log(electeds);
        if (electeds) {
            electeds.map((item) => {
                hospitalnav_deletelist(item).then((res) => {
                    hospitalnav_list().then((res) => {
                        setFormlist(res.data)
                    })
                })
            }
            )
        }

    }

    //分页（是通过子组件传递给父组件的值）
    const page = (page: TablePaginationConfig) => {
        // hospitalnav_pagelist(page).then((res) => {
        //     console.log(1);
        // })
    }

    // 编辑的时候
    const [isModalOpenedit, setIsModalOpenedit] = useState(false);

    const showModaledit = () => {
        setIsModalOpenedit(true);
    };
    const handleOkedit = () => {
        setIsModalOpenedit(false);
    };

    const handleCanceledit = () => {
        setIsModalOpenedit(false);
    };

    // 点击编辑
    const toEdit = (record: any) => {
        showModaledit();
        form.setFieldsValue(record)
        setNewid(record.id)
    }

    // 编辑表单提交
    const onFinishedit = (values: any) => {
        hospitalnav_editlist(newid, {
            yard: values.yard,
            address: values.address,
            operatingTime: values.operatingTime,
            phone1: values.phone1,
            phone2: values.phone2,
            transit: values.transit,
        }).then((res) => {
            hospitalnav_list().then((res) => {
                setFormlist(res.data)
            })
            notification.success({ message: '修改成功！' });
        })
    }


    // 新增
    // 控制新增表单的显示或隐藏
    const [isModalOpen, setIsModalOpen] = useState(false);

    // 新增表单显示
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // 新增表单验证通过，执行
    const onFinish = (values: any) => {
        // console.log(values);
        hospitalnav_addlist({
            yard: values.yard,
            address: values.address,
            operatingTime: values.operatingTime,
            phone1: values.phone1,
            phone2: values.phone2,
            transit: values.transit,
            key: formlist.length + 1
        }).then((res) => {
            notification.success({ message: '添加成功！' });
            hospitalnav_list().then((res) => {
                setFormlist(res.data)
            })
        })
    }

    return (
        <div className='doctormanagement'>
            <div className="head">
                <div className="opet">
                    <p>医院导航</p>
                </div>
                <div className="opet2">
                    <Button type='primary' onClick={() => { toAllDel() }}>删除</Button>
                    <Button type='primary' onClick={showModal}>新增</Button>
                    <Modal title="编辑院区信息" footer={[]} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                        <Form
                            name="basic"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}
                            onFinish={onFinish}
                        >
                            <Form.Item
                                label="院区"
                                name="yard"
                                rules={[{ required: true, message: '输入院区', }]}
                            >
                                <Input placeholder='输入院区' />
                            </Form.Item>

                            <Form.Item
                                label="地址"
                                name="address"
                                rules={[{ required: true, message: '输入地址' }]}
                            >
                                <Input placeholder='输入地址' />
                            </Form.Item>

                            <Form.Item
                                label="电话1"
                                name="phone1"
                                rules={[{ required: true, message: '输入电话1' }]}
                            >
                                <Input placeholder='输入电话1' />
                            </Form.Item>

                            <Form.Item
                                label="电话2"
                                name="phone2"
                                rules={[{ required: true, message: '输入电话2', }]}
                            >
                                <Input placeholder='输入电话2' />
                            </Form.Item>
                            <Form.Item
                                label="公交"
                                name="transit"
                                rules={[{ required: true, message: '输入公交', }]}
                            >
                                <Input placeholder='输入公交' />
                            </Form.Item>
                            <Form.Item label="操作时间" name="operatingTime">
                                <DatePicker />
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    添加
                                </Button>
                                <Button style={{ marginLeft: 20 }} onClick={() => { handleCancel() }}>
                                    取消
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                </div>
            </div>
            <div className="tablecountent">
                <div className="seach">
                    <Search placeholder="请输入院区" onSearch={onSearch} enterButton style={{ width: 300, marginRight: 20 }} />
                    {/* <Button type="primary" onClick={open}>搜索</Button> */}
                </div>
                <Modal title="编辑医生" footer={[]} open={isModalOpenedit} onOk={handleOkedit} onCancel={handleCanceledit}>
                    <Form
                        name="basic"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        onFinish={onFinishedit}
                        form={form}
                    >
                        <Form.Item label="院区" name="yard">
                            <Input placeholder='请输入院区' />
                        </Form.Item>
                        <Form.Item label="地址" name="address">
                            <Input placeholder='请输入地址' />
                        </Form.Item>
                        <Form.Item label="电话1" name="phone1">
                            <Input placeholder='请输入电话1' />
                        </Form.Item>
                        <Form.Item label="电话2" name="phone2">
                            <Input placeholder='请输入电话2' />
                        </Form.Item>
                        <Form.Item label="公交" name="transit">
                            <Input placeholder='请输入公交' />
                        </Form.Item>
                        <Form.Item label="操作时间" name="operatingTime">
                            <Input />
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                确定
                            </Button>
                            <Button style={{ marginLeft: 20 }} onClick={() => { handleCanceledit() }}>
                                取消
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
                {/* <UserTable ref={childref} header={columns} formlist={formlist} /> */}
                <UserTable page={page} elected={elected} header={columns} formlist={formlist} />
            </div>
        </div>
    );
}

export default Hospitalnavigation;